layui.define(["element", "laytpl", "jquery"], function(exports) {
	var element = layui.element,
		$ = layui.$,
		laytpl = layui.laytpl,
		layer = layui.layer;

	var mMenu = {

		/**
		 * 菜单初始化
		 * @param options.menuList   菜单数据信息
		 * @param options.multiModule 是否开启多模块
		 * @param options.menuChildOpen 是否展开子菜单
		 */
		render: function(options) {
			options.menuList = options.menuList || [];
			options.multiModule = options.multiModule || false;
			options.menuChildOpen = options.menuChildOpen || false;
			if (options.multiModule) {
				mMenu.renderMultiModule(options.menuList, options.menuChildOpen);
			} else {
				mMenu.renderSingleModule(options.menuList, options.menuChildOpen);
			}
			mMenu.listen();
		},

		/**
		 * 单模块
		 * @param menuList 菜单数据
		 * @param menuChildOpen 是否默认展开
		 */
		renderSingleModule: function(menuList, menuChildOpen) {
			menuList = menuList || [];
			var leftMenuHtml = '',
				childOpenClass = '',
				leftMenuCheckDefault = 'layui-this';
			var me = this;
			if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
			leftMenuHtml = this.renderLeftMenu(menuList, { childOpenClass: childOpenClass });
			$('body').addClass('admin-single-module'); //单模块标识
			$('.layui-nav.header-menu-pc, .layui-nav.header-menu-mobile', '.admin-header > .admin-header-content').remove();
			$('.admin-side').html(leftMenuHtml);
			element.init();
		},

		/**
		 * 渲染一级菜单
		 */
		compileMenu: function(menu, isSub) {
			var menuHtml = isSub ?
				'<dd class="{{d.childOpenClass || ""}} {{d.className || ""}}"><a href="javascript:;"{{#if( d.menu){ }} data-menu="{{d.menu}}"{{#}}}{{#if( d.id){ }} id="{{d.id}}"{{#}}}{{#if( d.grade){ }} grade="{{d.grade}}"{{#}}}{{#if(( !d.child || !d.child.length ) && d.href){ }} admin-href="{{d.href}}"{{#}}}{{#if( d.target){ }} target="{{d.target}}"{{#}}}>{{#if( d.icon){ }}<i class="{{d.icon}} fa-fw"></i>{{#}}}<span class="layui-left-nav">{{d.title}}</span></a>{{d.children || ""}}</dd>' :
				'<li {{#if( d.menu){ }} data-menu="{{d.menu}}"{{#}}} class="layui-nav-item {{d.childOpenClass || ""}} {{d.className || ""}}"{{#if( d.id){ }} id="{{d.id}}" {{#}}}> <a{{#if( d.href){ }} admin-href="{{d.href}}" {{#}}}{{#if( d.target){ }} target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }}<i class="{{d.icon}} fa-fw"></i>{{#}}}<span class="layui-left-nav">{{d.title}}</span></a>{{# if(d.children){}}{{d.children}}{{#}}}</li>';

			return laytpl(menuHtml).render(menu);
		},
		compileMenuContainer: function(menu, isSub) {
			if (!menu.children) return "";

			var wrapperHtml = isSub ?
				'<dl class="layui-nav-child ">{{d.children || ""}}</dl>' :
				'<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className || ""}}" lay-filter="{{d.id}}" id="{{d.id}}" lay-shrink="all">{{d.children || ""}}</ul>';

			return laytpl(wrapperHtml).render(menu);
		},

		each: function(list, callback) {
			var _list = [];
			for (var i = 0, length = list.length; i < length; i++) {
				_list[i] = callback(i, list[i]);
			}
			return _list;
		},
		renderChildrenMenu: function(menuList, options, grade) {
			if (!grade) grade = 1;
			var me = this;
			menuList = menuList || [];
			var html = this.each(menuList, function(idx, menu) {
				if (menu.child && menu.child.length) {
					menu.children = me.renderChildrenMenu(menu.child, { childOpenClass: options.childOpenClass || '' }, grade + 1);
				}
				menu.className = '';
				menu.childOpenClass = options.childOpenClass || '';
				menu.grade = grade;
				return me.compileMenu(menu, true);
			}).join("");
			return me.compileMenuContainer({ children: html }, true);
		},
		renderLeftMenu: function(leftMenus, options) {
			options = options || {};
			var me = this;
			var leftMenusHtml = me.each(leftMenus || [], function(idx, leftMenu) { // 左侧菜单遍历
				var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass: options.childOpenClass }, 1);
				var leftMenuHtml = me.compileMenu({
					href: leftMenu.href,
					target: leftMenu.target,
					childOpenClass: options.childOpenClass,
					icon: leftMenu.icon,
					title: leftMenu.title,
					children: children
				});
				return leftMenuHtml;
			}).join("");

			leftMenusHtml = me.compileMenuContainer({ id: options.parentMenuId, className: options.leftMenuCheckDefault, children: leftMenusHtml });
			return leftMenusHtml;
		},
		/**
		 * 多模块
		 * @param menuList 菜单数据
		 * @param menuChildOpen 是否默认展开
		 */
		renderMultiModule: function(menuList, menuChildOpen) {
			menuList = menuList || [];
			var me = this;
			var headerMenuHtml = '',
				headerMobileMenuHtml = '',
				leftMenuHtml = '',
				leftMenuCheckDefault = 'layui-this',
				childOpenClass = '',
				headerMenuCheckDefault = 'layui-this';

			if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
			var headerMenuHtml = this.each(menuList, function(index, val) { //顶部菜单渲染
				var menu = menuList[index]['href'];
				var id = menu + "HeaderId";
				var topMenuItemHtml = "";
				topMenuItemHtml = me.compileMenu({
					className: headerMenuCheckDefault,
					menu: menu,
					id: id,
					title: val.title,
					href: "",
					target: "",
					children: ""
				});
				leftMenuHtml += me.renderLeftMenu(val.child, {
					parentMenuId: menu,
					childOpenClass: childOpenClass,
					leftMenuCheckDefault: leftMenuCheckDefault
				});
				headerMobileMenuHtml += me.compileMenu({ id: id, menu: menu, id: id, icon: val.icon, title: val.title }, true);
				headerMenuCheckDefault = "";
				leftMenuCheckDefault = "layui-hide";
				return topMenuItemHtml;
			}).join("");
			$('body').addClass('admin-multi-module'); //多模块标识
			$('.admin-header .header-menu-pc').html(headerMenuHtml); //电脑
			$('.admin-side').html(leftMenuHtml);
			$('.admin-header .header-menu-mobile > .layui-nav-item > .layui-nav-child').html(headerMobileMenuHtml); //手机
			element.init();
		},

		/**
		 * 监听
		 */
		listen: function() {

			/**
			 * 菜单模块切换
			 */
			$('body').on('click', '[data-menu]', function() {
				var loading = layer.load(0, { shade: false, time: 2 * 1000 });
				var menuId = $(this).attr('data-menu');
				// header
				$(".layui-nav.header-menu-pc > .layui-nav-item.layui-this, .layui-nav.header-menu-mobile > .layui-nav-item > .layui-nav-child > .layui-this", '.admin-header > .admin-header-content').removeClass('layui-this');
				$('.layui-nav.header-menu-pc > .layui-nav-item[id="' + menuId + 'HeaderId"], .layui-nav.header-menu-mobile > .layui-nav-item > .layui-nav-child > dd:has([id="' + menuId + 'HeaderId"])', '.admin-header > .admin-header-content').addClass('layui-this');
				// left
				$('.admin-side>.layui-nav.layui-nav-tree.layui-this').removeClass('layui-this').addClass('layui-hide');
				$("#" + menuId).removeClass('layui-hide').addClass('layui-this');

				if ($('.admin-header > .admin-header-content > .admin-tool [data-side-fold]').attr('data-side-fold') === '1' && $(this).parents('.layui-nav.header-menu-mobile').length > 0) {
					$('.admin-site-mobile').trigger("click");
				}
				layer.close(loading);
			});

			/**
			 * 菜单缩放
			 */
			$('body').on('click', '.admin-site-mobile, [data-side-fold]', function() {
				var loading = layer.load(0, { shade: false, time: 2 * 1000 });
				var elem = $('.admin-header > .admin-header-content > .admin-tool [data-side-fold]'),
					isShow = elem.attr('data-side-fold');
				if (isShow == 1) { // 缩放
					elem.attr('data-side-fold', 0).attr('class', 'fa fa-indent');
					$('body').removeClass('admin-all').addClass('admin-mini');
				} else { // 正常
					elem.attr('data-side-fold', 1).attr('class', 'fa fa-outdent');
					$('body').removeClass('admin-mini').addClass('admin-all');
				}
				layer.close(loading);
			});
		}

	};

	exports("mMenu", mMenu);
});